<?php 
	if($mode == 'virtical') 
	{
		$kieu='true';
	}
	else
		$kieu='false';	

foreach($files as $i)
		{ 
		$title=substr($i,0,strpos($i,'.'));
		$thu=substr($i,strpos($i,'.'),strlen($i));
		
		if($thu == '.jpeg' || $thu == '.pjpeg' || $thu == '.jpg' || $thu == '.png'|| $thu == '.bmp')
		{
			$thu1=$thu1."{url: '".JURI::base().$dir.'/'.$i."', title: '".$title."'},";
		}
		}
		$thu1=substr($thu1,0,-1);
if($auto == 1)
	$auto = $speed;		
		
?>
	

<script type="text/javascript">
//var $j = jQuery.noConflict();

tb_pathToImage = "<?php echo JURI::base(); ?>modules/mod_slideshow/images/loading-thickbox.gif";
var mycarousel_itemList = [<?php echo $thu1;?>];

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
	var idx = carousel.index(i, mycarousel_itemList.length);
	var itemx = mycarousel_getItemHTML(mycarousel_itemList[idx - 1]);
		
	var item11 = jQuery(mycarousel_getItemHTML(mycarousel_itemList[idx-1])).get(0);
		
	//alert(item11);
	tb_init(item11);
	carousel.add(i, item11);
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};
function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }

        if (i > mycarousel_itemList.length) {
            break;
        }

        // Create an object from HTML
        var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);

        // Apply thickbox
        tb_init(item);
        carousel.add(i, item);
    }
};
/**
 * Item html creation helper.
 */
var w=<?php echo $width; ?>;
var h=<?php echo $height; ?>;
function mycarousel_getItemHTML(item)
{
	var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
    return '<a  href="' + url_m + '" title="' + item.title + '" class="thickbox" ><img style=" border: 1px solid #d8d8d8;  margin: 4px;   padding: 1px;" src="' + item.url + '" width="' + w + '" height="' + h + '" alt="' + item.title + '" /></a>';
    
};

jQuery(document).ready(function() 
		{
	jQuery('#mycarousel').jcarousel({
		vertical: <?php echo $kieu;?>,
		scroll: <?php echo $scroll;?>,
		auto: <?php echo $auto;?>,	
        wrap: 'circular',
        direction: <?php echo $direction; ?>,
        /*size: mycarousel_itemList.length,*/
        /*itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback},*/
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});
</script>
<?php 
if($mode == 'virtical')
{
	$hV = $height * $sohinh;
	$wV = $width;
	//$h=$hV+90;
}
else
{
	//$h=$height;
	$wH = $width * $sohinh;
	$hH = $height;
	
}
$dem = 10 * ($sohinh-1);
$dem1 = 10 * ($sohinh-1);
?>
<style type="text/css">

.jcarousel-skin-tango
{
	width: <?php echo 100+$dem+$wH."px"; ?>;
	height: <?php echo ($hH)."px"; ?>;
}
.jcarousel-skin-tango .jcarousel-container-horizontal 
{
    height:<?php echo ($hH)."px"; ?>;
	width:<?php echo (15+$dem+$wH)."px"; ?>;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal 
{
    height:<?php echo (30+$hH)."px"; ?>;
	width:<?php echo (12+$dem+$wH)."px"; ?>;
}
.jcarousel-list 
{
	height: <?php echo ($height)."px"; ?>;
}
.jcarousel-list li, .jcarousel-item 
{
	width:<?php echo ($width)."px"; ?>;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal 
{
	top:<?php echo ($height/2)."px"; ?>;
}
.jcarousel-skin-tango .jcarousel-next-horizontal 
{
	top:<?php echo ($height/2)."px"; ?>;
}
/* doc */
.jcarousel-skin-tango .jcarousel-container-vertical 
{
	height:<?php echo (38+$hV+$dem1+45)."px"; ?>;
	width:<?php echo ($wV)."px"; ?>;
}
.jcarousel-skin-tango .jcarousel-clip-vertical 
{
	height:<?php echo ((7*($sohinh-1))+$dem+$hV)."px"; ?>;
	width:<?php echo ($wV)."px"; ?>;
	top:35px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical 
{
	left: <?php echo (20+$width/2)."px"; ?>;
}
.jcarousel-skin-tango .jcarousel-next-vertical 
{
	left: <?php echo (20+$width/2)."px"; ?>;
}
.jcarousel-list
{
	height: <?php echo (20+$height*2)."px"; ?>;
	width:<?php echo ($width)."px"; ?>;
}

.jcarousel-list li, .jcarousel-item 
{
	height: <?php echo ($height)."px"; ?>;
}
</style>
		<ul id="mycarousel" class="jcarousel-skin-tango">
	    </ul>
	
<input type="hidden" name="option" value="mod_slideshow" />
<input type="hidden" name="view" value="slideshow" />
<input type="hidden" name="return" value="<?php echo $return; ?>" />
<?php echo JHTML::_( 'form.token' ); ?>